<template>
	<view class="news-detail">
		<u-navbar back-text=" " :background="{ background: '#EA5646' }" title-color="#FFFFFF"
			:back-text-style="{ color: '#FFFFFF' }" back-icon-color="#FFFFFF" title="详情">
			<!-- <u-icon
        slot="right"
        name="zhuanfa"
        size="44"
        color="#ffffff"
        style="margin-right: 20rpx"
        @click="show = true"
      ></u-icon> -->
		</u-navbar>
		<view class="news-detail__header">
			<view><text class="title">{{ newsInfo.title }}</text></view>
			<view class="flex align-center justify-between mt-36">
				<text class="tip">{{ newsInfo.createTime }}</text>
				<text class="tip" v-show="newsInfo.popularity">阅读量 {{ newsInfo.popularity }}</text>
			</view>
		</view>
		<view class="news-detail__content">
			<u-parse :html="newsInfo.content"></u-parse>
		</view>
		<Share v-model="show" @share="handleShare"></Share>
	</view>
</template>

<script>
	import Share from "@/components/Share/Share.vue";
	export default {
		components: {
			Share,
		},
		data() {
			return {
				show: false,
				id: null,
				newsInfo: {},
			};
		},
		onLoad(options) {
			options.id && (this.id = parseInt(options.id));
			this.getNewsDetail();
		},
		methods: {
			getNewsDetail() {
				this.$zx.common_api.newsDetail(this.id).then((data) => {
					this.newsInfo = {
						...data,
					};
					this.newsInfo.popularity += 1;
					this.handleUpdate();
				});
			},
			handleUpdate() {
				this.$zx.common_api.readNews(this.id);
			},
			handleShare(type) {
				uni.share({
					provider: "weixin",
					scene: type,
					type: 0,
					href: `https://m.zhenxing-sz.com/knowledgeDetails?article_id=${this.newsInfo.id}`,
					title: this.newsInfo.title,
					summary: this.newsInfo.profiles,
					imageUrl: this.newsInfo.imgUrl,
					success: function(res) {
						this.show = false;
					},
					fail: function(err) {},
				});
			},
		},
	};
</script>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	.news-detail {
		&__header {
			padding: 36rpx 24rpx;
		}

		&__content {
			padding: 0 24rpx;
			margin-top: 24rpx;
		}
	}

	.title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 50rpx;
		color: #000000;
		opacity: 1;
	}

	.tip {
		font-size: 28rpx;
		font-family: SF Pro Text;
		font-weight: 400;
		line-height: 32rpx;
		color: #999999;
		opacity: 1;
	}
</style>
